<template>
  <div class="page-mobile-about">
    <white-header :isShowTopNav="true" :isShowBack="true" :isShowRight="true" :title="title"></white-header>
    <div class="logo">
      <img :src="web_info.SUB_LOGO" alt="">
    </div>
    <div class="inline"></div>
    <div class="desc">
      <div class="title">- {{web_info.SYSTEM_NAME}} -</div>
      <div class="content">
        {{web_info.ABOUT_US}}
      </div>
    </div>
    <div class="inline"></div>
    <div class="message">
      <div class="msg-left">
        <img src="/img/mobile/us_landline.png" alt="">
        <div>座机</div>
      </div>
      <div class="msg-right">{{web_info.TEL}}</div>
    </div>
    <div class="message">
      <div class="msg-left">
        <img src="/img/mobile/us_phone.png" alt="">
        <div>手机</div>
      </div>
      <div class="msg-right">{{web_info.MOBILE}}</div>
    </div>
    <div class="message">
      <div class="msg-left">
        <img src="/img/mobile/us_email.png" alt="">
        <div>邮箱</div>
      </div>
      <div class="msg-right" style="color: #636466;">{{web_info.EMAIL}}</div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import WhiteHeader from "~/components/mobile/WhiteHeader.vue";
export default {
  components: {
    WhiteHeader
  },
  data() {
    return {
      title:"关于我们"
    };
  },
  computed: {
    ...mapState({
      web_info(state) {
        return state.web_info;
      }
    })
  },
  watch: {},
  methods: {},
  created() {
    console.log("web_info:", this.$t("locale.mobile.about.t1"));
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.page-mobile-about {
  .logo{
    width: 1.4rem;
    height: 1.4rem;
    margin: .5rem auto;
    // margin: 0 auto;
    // background-color: #ffffff;
    img{
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .inline{
    width: 6.624rem;
    height: .0096rem;
    margin: .3rem auto;
    background-color: #dce1e6;
  }
  .desc{
    .title{
      text-align: center;
      font-size: .36rem;
      color: var(--theme-color);
      font-weight: bold;
    }
    .content{
      width: 5.088rem;
      margin: .3rem auto;
      color: #494b4d;
      font-size: .3rem;
      line-height: .46rem;
    }
  }
  .message{
    width: 5.088rem;
    margin: .3rem auto;
    display: flex;
    .msg-left{
      width: 24%;
      display: flex;
      align-items: center;
      font-size: .3rem;
      position: relative;
      &::after{
        content: "";
        width: .0192rem;
        height: .2688rem;
        display: block;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background-color: #abafb3;
      }
      img{
        width: .3rem;
        height: .3rem;
        display: block;
        margin-right: .1rem;
      }
    }
    .msg-right{
      width: 76%;
      font-size: .3rem;
      padding-left: .4rem;
      color: var(--theme-color);
    }
  }
}
</style>
